<template>
	<!-- <view v-show="show" @touchmove.stop.prevent="discard"> -->
	<view v-show="show">
		<view class="popup-bg" @click.stop="close"></view>
		<view class="popup-content">
			<slot>
				<view class="popup-list">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="li" v-for="(item,index) in rangeData" :key="index" @click="onChange(index,item)">
							<view class="">{{ item.value }}</view>
							<image v-if="selectedId==index" src="/static/workImg/ok.png" mode=""></image>
						</view>
					</scroll-view>

				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,

			}
		},
		data() {
			return {
				selectedData: {},
				selectedId: 0,
				selectedValue: 'quanbu', // 绑定选中的值
				rangeData: [{
						id: 1,
						value: '全部班级'
					},
					{
						id: 2,
						value: '七年级1班'
					},
					{
						id: 3,
						value: '七年级2班'
					},
					{
						id: 4,
						value: '七年级3班'
					},
					{
						id: 5,
						value: '七年级4班'
					},
					{
						id: 6,
						value: '七年级5班'
					},
					{
						id: 7,
						value: '七年级6班'
					},
					{
						id: 8,
						value: '七年级7班'
					}
				]
			};
		},
		methods: {
			close() {
				this.$emit('close')

			},
			// 点击选中
			onChange(index, item) {
				this.selectedData = item
				this.selectedId = index
				console.log('index, item', index, item)
				this.$emit('showClassName', this.selectedData);
				// this.$emit("cancel");
				// // 自定义 change 事件获取选中的值 
				// this.$emit("change", {
				// 	label: item.label,
				// 	value: item.value
				// });


			},

		}
	};
</script>

<style>

</style>
